<script setup>
  import {useRoute} from 'vue-router'
  import {useBlogsStore} from '@/stores/blog.js'

  const route = useRoute();
  const id = Number(route.params.id);
  const blogStore = useBlogsStore();
  const blog = blogStore.getBlogById(id);
</script>

<template>
  <div class="blog-card">
    <h3 class="blog-title">{{blog.title}}</h3>
    <p class="blog-title">作者：{{blog.author}}|日期：{{blog.date}}</p>
    <!--    只展示前50个字，多余的字用省略号代替-->
    <p>{{blog.content.substring(0,50)}}...</p>
  </div>
</template>

<style scoped>

</style>
